<!--
 * @Author: 李环玉 834654733@qq.com
 * @Date: 2023-12-16 02:46:45
 * @LastEditors: 李环玉 834654733@qq.com
 * @LastEditTime: 2024-01-08 20:14:07
 * @FilePath: \nuxt-app\pages\list\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE

-->
<template>
 <div>
  <NuxtLayout name="backgroud">
    <div class="blognav">
      <ul class="blognav-menu">
        <li
          v-for="item in menuList"
          :key="item.id"
          @mouseenter="changeMenu(item)"
        >
        <n-dropdown trigger="hover" :options="tabMenu" @select="handleSelect">
          <div class="kaiti" v-loading="menuLoading">
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="item.icon"></use>
            </svg>
            {{ item.title }}
          </div>
        </n-dropdown>
        </li>
      </ul>
    </div>
    <div class="bloglist">
      <div>
        <NoticeCard />
        <div class="bloglist_usercard">
          <UserCard />
        </div>
      </div>
      <div class="bloglist-list" v-loading="loading">
        <h2 class="kaiti">分类：{{ category }} ---- 共（{{ blogNum }}）篇</h2>
          <ul class="bloglist-list_item">
            <li
              v-for="item in bloglist"
              :key="item.id"
              class="bloglist-list_item_li"

            >
              <div class="bloglist-list_item_li--text">
                <h1 class="kaiti" @click="openDetaile(item)">
                  <svg class="icon" aria-hidden="true">
                    <use :xlink:href="item.tagType"></use>
                  </svg>
                  {{ item.title }}
                </h1>
                <h2 @click="openDetaile(item)">{{ item.preface }}</h2>
                <div>
                  <span>
                    <i class="iconfont icon-yonghu1"></i>
                    {{ item.author }}.{{ item.address }}
                  </span>
                  <span>
                    <svg class="icon" aria-hidden="true">
                      <use :xlink:href="item.system"></use>
                    </svg>
                    {{ item.system.split('-')[1] }}
                  </span>
                  <span>
                    <svg class="icon" aria-hidden="true">
                      <use :xlink:href="item.browser"></use>
                    </svg>
                    {{ item.browser.split('-')[1] }}
                  </span>
                  <span>
                    <i class="iconfont icon-shijian1"></i>
                    {{ item.createTime }}
                  </span>
                  <span>
                    <i class="iconfont icon-chakan2"></i>
                    {{ item.view }}
                  </span>
                  <span>
                    <i class="iconfont icon-tuijian2 like" @click="porintLikeItem(item)"></i>
                    {{ item.like }}
                  </span>
                  <span>
                    <i class="iconfont icon-xinxi11"></i>
                    {{ item.comment }}
                  </span>
                </div>
              </div>
              <div v-if="item.img" class="bloglist-list_item_li--img">
                <img :src="item.img">
              </div>
            </li>
          </ul>
          <div class="kaiti bloglist-list_more" @click="loadingMore">点击查看更多>></div>
      </div>
      <div>
        <AbouteSite />
        <ToolCard />
        <LinkCard />
      </div>
    </div>
  </NuxtLayout>
 </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router"
import { getMenuLists } from "../../service/api/menu"
import { getBlog,viewBlog,portLike } from "../../service/api/blog"
import Icon from "../../utils/icon.vue"
import { useNotification } from "naive-ui"
import { AnyRecord } from 'dns'
const router = useRouter()
const notification = useNotification()
let menuList = ref()
let tabMenu = ref()
let category = ref('')
let blogNum = ref('')
const bloglist = ref()
let query = ref({
  firstClass:null,
  secondClass:null
})
let pages = ref({
  pageNo:1,
  pageSize:10
})
let loading = ref(false)
let menuLoading = ref(false)
//查询菜单
const getMenuList = async (params:any) => {
  await nextTick()
  try {
    const res:any = await getMenuLists(params)
    const data = res.data._value.data
    menuList.value = data
    category.value = data[0].title
    getTabMenu({id:menuList.value[0].id})
    getBlogList({firstClass:menuList.value[0].id})
    query.value.firstClass = menuList.value[0].id
    query.value.secondClass = null
    document.getElementsByClassName('bloglist-list_more')[0].style.display = 'block'
  } catch(err) {
    console.log(err)
  }
}
//查询Tab菜单
const getTabMenu = async (params:any)=>{
  await nextTick()
  try {
    const res:any = await getMenuLists(params)
    const data = res.data._value.data
    tabMenu.value = data.map((i:any) => {
      return{
        label:i.title,
        key:i.id + '-' + i.title,
        icon:renderIcon(i.icon)
      }
    })
  } catch(err) {
    console.log(err)
  }
}
const handleSelect = (key:any)=>{
  pages.value.pageSize = 10
  window.scrollTo({  
    top: 0,  
    behavior: 'smooth' // 平滑滚动到顶部  
  });
  category.value = key.split('-')[1]
  getBlogList({secondClass:key.split('-')[0]})
  query.value.secondClass = key.split('-')[0]
  query.value.firstClass = null
  document.getElementsByClassName('bloglist-list_more')[0].style.display = 'block'
}
const renderIcon = (icon:any) => {
  return () => {
    return h(Icon,{icon})
  }
}
//点击菜单
const changeMenu = (item:any)=>{
  menuLoading.value = true
  category.value = item.title
  pages.value.pageSize = 10
  window.scrollTo({  
    top: 0,  
    behavior: 'smooth' // 平滑滚动到顶部  
  });
  getTabMenu({id:item.id})
  getBlogList({firstClass:item.id})
  query.value.firstClass = item.id
  query.value.secondClass = null
  document.getElementsByClassName('bloglist-list_more')[0].style.display = 'block'
  menuLoading.value = false
}
const getBlogList = async (obj:any) => {
  loading.value = true
  await nextTick()
  let params = {
    pageNo:pages.value.pageNo,
    pageSize:pages.value.pageSize,
    firstClass:obj.firstClass,
    secondClass:obj.secondClass
  }
  const res:any = await getBlog(params)
  const data = res.data._value
  if(data.code == 200){
    bloglist.value = data.data
    blogNum.value = data.total
    loading.value = false
    if(data.total <= data.pageSize){
      notification['success']({
        content: '通知',
        meta: '已加载全部文章',
        duration: 2500,
        keepAliveOnHover: true
      })
      document.getElementsByClassName('bloglist-list_more')[0].style.display = 'none'
    }
  }
}
const loadingMore = () => {
  pages.value.pageSize += 10
  getBlogList(query.value)
}
//查看详情
const openDetaile = (item:any) => {
  navigateTo({
    path:'/detail',
    query:{
      id:item.id
    }
  })
  updateView(item)
}
//博客浏览
const updateView = async (obj:any) =>{
  await nextTick()
  const res:any = await viewBlog(obj)
  let data = res.data._rawValue
  if(data.code == 200){
    console.log(res.message)
  }
}
//点赞
const porintLikeItem = async (item:any) => {
  await nextTick()
  const res:any = await portLike(item)
  console.log(res)
  let data = res.data._rawValue
  if(data.code == 200){
    getBlogList(query.value)
  }
}
const scrollTop = useScrollTop()
watch(scrollTop,() => {
  let el = document.getElementsByClassName('bloglist_usercard')
  let nav = document.getElementsByClassName('blognav')
  if(scrollTop.value >= 60){
    if(el[0]){
      el[0].style.position = 'fixed'
      el[0].style.top = '120px'
      nav[0].style.backgroundColor = "#c2c8d1"
    }
  } else{
    if(el[0]){
      el[0].style.position = ''
      nav[0].style.backgroundColor = `rgba(255,255,255, 0.8)`
    }
  }
})
onMounted(()=>{
  getMenuList({ id:null })
})



</script>
<script lang="ts">
export default {
  layout:false
}
</script>

<style scoped lang="scss">
.blognav{
  box-decoration-break: clone;
  width: 100%;
  height: 40px;
  background-color: rgba($color: #fff, $alpha: .8);
  box-shadow: 0 1px 10px rgba(130,130,134,.8);
  position: fixed;
  top: 60px;
  transition: all 1s;
  z-index: 999;
  &-menu{
    display: flex;
    width: 80%;
    height: 40px;
    margin: 0 auto;
    align-items: center;
    li{
      margin-right: 40px;
      cursor: pointer;
    }
    li:hover{
      color:$yun-color;
    }
  }
}
.bloglist{
  width: 80%;
  margin: 0 auto;
  display: flex;
  padding-top: 60px;
  &-list{
    background-color: rgba($color: #fff, $alpha: .8);
    margin-left: 10px;
    margin-right: 10px;
    width: 100%;
    padding: 20px;
    border-radius: 6px;
    h2{
      text-align: center;
      font-size: 18px;
      margin-bottom: 20px;
    }
    &_item{

      &_li{
        background-color: #eee;
        margin-bottom: 10px;
        padding: 20px;
        border-radius: 4px;
        display: flex;
        justify-content: space-between;
        width: 95%;
        transition: box-shadow 0.3s ease;  
        &--text{
          h1{
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 10px;
          }
          h2{
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            color: #666;
            line-height: 24px;
          }
          div{
            line-height: 30px;
          }
          span{
            font-size: 12px;
            margin-right: 20px;
            display: inline-flex;
            align-items: center;
            .icon{
              margin-right: 5px;
            }
            .iconfont{
              vertical-align: middle;
              font-size: 16px;
              margin-right: 5px;
            }
            .like{
              transition: 0.5s;
              cursor: pointer;
            }
            .like:hover{
              color: $yun-color;
            }
          }
        }
        &--img{
          img{
            width: 120px;
            height: 80px;
            border-radius: 4px;
            margin-left: 20px;
          }
        }
      }
      &_li:hover{
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); 
      }
    }
    &_more{
      text-align: center;
      margin-top: 10px;
      color: $yun-color;
      font-size: 16px;
      cursor: pointer;
    }
  }
}
.usercard{
  transition: all 0.5s;
}
</style>  